<template>
	<view class="wrap">
		<view class="main">
			<view class="user-info">
				<view class="b-item">
					<view class="s-tit">旧昵称</view>
					<text class="s-input">{{form.oldNickname}}</text>
				</view>
				<view class="b-item">
					<view class="s-tit">新昵称</view>
					<input class="s-input" type="nickname" :value="form.newNickname" minlength="11" maxlength="11"
						@input="onInput" data-field="newNickname" placeholder="请输入新昵称" />
				</view>
			</view>
			<view class="btn-save" :class="{ disable: disable.submit }" @click="onSave">保存修改</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		changeNickname
	} from '@/service/api/user.js'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				form: {
					oldNickname: '',
					newNickname: ''
				},
				disable: {
					submit: false
				}
			}
		},
		onLoad() {
			getUserInfo().then(([err, res]) => {
				console.log('getUserInfo', err, res)
				if (!err) {
					this.form.oldNickname = res.nickname
				}
			})
		},
		computed: {
			loginMethods() {
				return this.$store.getters.globalConfig.login_methods || []
			},
		},
		methods: {
			onInput(e) {
				console.log('onInput', e)
				const field = e.target.dataset.field
				this.form[field] = e.detail.value
			},
			onSave() {
				if (this.disable.submit) {
					return;
				}
				if (!this.form.newNickname) {
					return this.$logic.showToast('新昵称不能为空')
				}
				if (this.form.newNickname.length < 3) {
					return this.$logic.showToast('新昵称长度必须大于3位')
				}
				if (this.form.newNickname == this.form.oldNickname) {
					return this.$logic.showToast('未修改昵称')
				}
				this.disable.submit = true
				changeNickname(this.form.newNickname).then(([err, res]) => {
					console.log('changeNickname', err, res)
					this.disable.submit = false
					if (!err) {
						this.$logic.showToast('修改成功').then(([err, res]) => {
							uni.reLaunch({
								url: '/pages/user/info'
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding: 0 20upx;
	}

	.user-info {
		margin-top: 40upx;
		background: #fff;
		border-radius: 20upx;

		.b-item {
			padding: 0 40upx;
			border-bottom: 1upx solid $pq-bg-color;
			height: 100upx;
			display: flex;
			align-items: center;
			position: relative;

			.s-tit {
				color: $pq-main-color;
				font-size: 26upx;
			}

			.s-input {
				flex: 1;
				color: $pq-minor-color;
				text-align: right;
				font-size: 26upx;
			}
		}
	}

	.btn-save {
		margin-top: 50upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		color: #fff;
		font-size: 32upx;
		background: $pq-main-color;
		border-radius: 50upx;
		letter-spacing: 10upx;
	}
</style>